<template>
  <div>
    <div ref="slotContainer">
      <slot></slot>
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        Dropdown List
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu ref="elDropdownMenuEl">
          <el-dropdown-item
            v-for="(item, i) in dropdownItemNum"
            :key="i"
            :ref="`dropdownItem${i}`"
          ></el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      dropdownItemNum: 0,
    };
  },
  mounted() {
    const childrenNode = this.$refs.slotContainer.children;
    this.dropdownItemNum = childrenNode.length - this.num;
    const menuNodeList = [];
    for (let i = childrenNode.length - 1; i >= 0; i--) {
      if (i > this.num - 1) {
        const cloneNode = childrenNode[i];
        menuNodeList.unshift(cloneNode);
        cloneNode.remove();
      }
    }
    menuNodeList.forEach((node, i) => {
      this.$nextTick(() => {
        this.$refs["dropdownItem" + i][0].$el.appendChild(node);
      });
    });
  },
};
</script>
